<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="images4/0.jpg" height="378" width="640" ondragstart="return false" id="img"/>
</body>
</html>
<script>
var imgs=document.getElementById('img');
imgs.onmousedown=function(evt){
    e=evt||window.event;
    var x1=e.offsetX;
    document.onmousemove=function(evt){
        var ee=evt||window.event;
        var temp=x1-ee.clientX;
        var imgIndex=parseInt(temp%77);
        imgs.src="images4/"+Math.abs(imgIndex)+".jpg";
        console.log(imgs.src);
    }
    document.onmouseup=function(evt){
        e=evt||window.event;
        document.onmousemove=null;
    }
}
 </script>